<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet"  href="../css/styles.css" />
    <title>上传文件</title>
    <style>
        .school:hover{
            cursor: pointer;
            background: #000;
        }
        .cho-sch{
            position: absolute;
            top:50%;
            left:50%;
            z-index:2000;
            background-color: #f8f8f8;;
            transform:translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            /*-webkit-transform:translateY(-50%);*/
            display: none;
        }
        .mask{
            position: fixed;
            left: 0;
            top: 0;
            right:0;
            bottom:0;
            background-color: rgba(0,0,0,0.3);
            display: none;
            z-index:1000;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><span>Print</span>Cloud</a>

            <ul class="user-menu" style="margin:0;height:50px;line-height:50px;" >

                <li class="dropdown pull-right" style="display: inline-block;">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user">
                            </span> User <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <!--<li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>-->
                        <!--<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>-->
                        <li><a href="login.html"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
                    </ul>
                </li>
                <li style="display: inline-block;margin:0 30px 0 0;padding:0;height: 100%;">
                    <p class="push-right school" style="color:white;text-align: center"  >
                        山东大学
                    </p>
                </li>
            </ul>
        </div>

    </div><!-- /.container-fluid -->
</nav>

<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
    <!--<form role="search">-->
    <!--<div class="form-group">-->
    <!--<input type="text" class="form-control" placeholder="Search">-->
    <!--</div>-->
    <!--</form>-->
    <ul class="nav menu">
        <li class="parent">
            <a href="uploadFile.html">
                <span class="glyphicon glyphicon-book"></span> 文档打印
            </a>
        </li>
        <li class="parent active">
            <a href="#">
                <span class="glyphicon glyphicon-picture "></span> 照片打印 </a>
        </li>
        <li class="parent ">
            <a href="order.html">
                <span class="glyphicon glyphicon-list"></span> 我的订单 </a>
        </li>

        <li class="parent ">
            <a href="personInfo.html">
                <span class="glyphicon glyphicon-user"></span> 个人信息 </a>
        </li>

        <li class="parent ">
            <a href="download.html">
                <span class="glyphicon glyphicon-cloud-download"></span> 文件下载
            </a>
        </li>

        <li role="presentation" class="divider"></li>
        <li><a href="login.html"><span class="glyphicon glyphicon-log-out"></span> Login Page</a></li>
    </ul>
</div>

<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
            <li class="active">照片打印</li>
        </ol>
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="panel panel-info">
                <div class="panel-heading" style="height:60px;line-height:40px;font-size: 18px;color:#14a6ef;">
                    选择照片上传
                </div>
                <div class="panel-body" style="height:100%;">
                    <div id="upload" style="border:1px solid #3385ff">
                        <div id="drop-area" style="height:130px;text-align: center;line-height:130px;font-size: 40px;
                                color:gray;background-color: #fafafa;margin:15px;
                             " >将照片拖拽到此区域</div>
                        <div id="upload-wrap" style=" position: relative;
                                                                width: 158px;
                                                                height: 43px;
                                                                font-size: 16px;
                                                                border: 1px solid #cacbcc;
                                                                line-height: 43px;
                                                                margin: 2px auto;
                                                                color: #333;
                                                                text-align: center;">
                            <input type="file" class="upload-doc" id="upload-doc"
                                   style=" position: absolute;
                                                font-size: 0;
                                                width: 100%;
                                                height: 100%;
                                                outline: 0;
                                                opacity: 0;
                                                /*margin-left: 0;*/
                                                z-index: 1;
                                                cursor: pointer;"
                                   value="上传照片">
                            <i class="glyphicon glyphicon-cloud-upload"
                               style="position: relative;
                                                top: 2px;
                                                width: 18px;
                                                height: 18px;
                                                margin-right: 8px;
                                                background-position: -144px 0;"
                                    ></i>
                            <span class="upload-text">本地上传照片</span>
                        </div>
                    </div>
                    <div id="preview">
                        <div class="panel panel-info"  style='margin-top:10px;border:1px solid #14a6ef;'>
                            <div class="panel-heading" style="height:40px;line-height:20px;font-size: 14px;font-weight:500;color:#14a6ef;">
                                <div class="col-md-10">预览</div>
                                <div class="col-md-2 pull-right" style="padding-left:30px;padding-right: 0;">份数</div>
                            </div>
                            <div class="panel-body" id="preview_con" style="height:100%;">

                            </div>
                        </div>
                    </div>
                    <div id="order-info">
                        <div class="panel panel-info" style='margin-top:10px;border:1px solid #14a6ef;'>
                            <div class="panel-heading"  style='height:40px;line-height:20px;font-size: 14px;font-weight:500;color:#14a6ef;'>
                                确认订单
                            </div>
                            <form class="form-horizontal" role="form" action="" method="post">
                                <div class="panel-body row" style="height:100%;">
                                    <div class="col-md-6" style="font-size: 16px;">
                                        <div class="col-md-6"  style="padding-top:5px;">
                                            <label class=" checkbox-inline">
                                                <input type="radio" name="isfast" id="isfast2" value="0" checked>不加急
                                            </label>
                                        </div>
                                        <div class="col-md-6"  style="padding-top:5px;">
                                            <label class=" checkbox-inline">
                                                <input type="radio" name="isfast" id="isfast1" value="1" >加急
                                            </label>
                                        </div>

                                        <div class="col-md-6"  style="padding-top:13px;">
                                            <label class=" checkbox-inline">
                                                <input type="radio" name="ispayonline" id="ispayonline1" value="0" checked >在线支付
                                            </label>
                                        </div>
                                        <div class="col-md-6"  style="padding-top:13px;">
                                            <label class=" checkbox-inline">
                                                <input type="radio" name="ispayonline" id="ispayonline2" value="1" >货到付款
                                            </label>
                                        </div>

                                        <div class="col-md-6"   style="padding-top:13px;">
                                            <label class=" checkbox-inline">
                                                <input type="radio" name="isdelivery" id="isdelivery1" value="0" checked >送货上门
                                            </label>
                                        </div>
                                        <div class="col-md-6"   style="padding-top:13px;">
                                            <label class=" checkbox-inline">
                                                <input type="radio" name="isdelivery" id="isdelivery2" value="1" >到店自取
                                            </label>
                                        </div>
                                        <!--<div class="form-group">-->
                                        <!--<label class="col-md-4 control-label" style="font-size:12px;">送货上门</label>-->
                                        <!--<div class="col-md-4">-->
                                        <!--<select class="form-control">-->
                                        <!--<option value="0">今天</option>-->
                                        <!--<option value="1">明天</option>-->
                                        <!--</select>-->
                                        <!--</div>-->
                                        <!--<div class="col-md-4">-->
                                        <!--<select class="form-control">-->
                                        <!--<option value="0">今天</option>-->
                                        <!--<option value="1">明天</option>-->
                                        <!--</select>-->
                                        <!--</div>-->
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="col-md-3" style="margin-right:-20px;">
                                                <label for="phone" class="control-label">手机号：</label>
                                            </div>
                                            <div class="col-md-9">
                                                <input type="text" class="form-control" id="phone" placeholder="手机号" required>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-md-3" style="margin-right:-20px;">
                                                <label for="address" class="control-label">地址：</label>
                                            </div>
                                            <div class="col-md-9">
                                                <input type="text" class="form-control" id="address" placeholder="地址" required>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-md-3" style="margin-right:-20px;">
                                                <label for="beizhu" class="control-label">备注：</label>
                                            </div>
                                            <div class="col-md-9">
                                                <input type="text" class="form-control" id="beizhu" placeholder="备注">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4" id="allprice">

                                    </div>
                                    <div class="col-md-4">
                                        <input  type="submit" class="btn btn-primary  btn-block" id="sub_order" value="提交订单">
                                    </div>
                                    <div class="col-md-4"></div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>

</div>

<div class="cho-sch" style="height: 225px;width:800px;text-align: center;font-weight: 400;color: #333;font-size: 1.6rem;line-height: 1.6;">
    <div class="row">
        <div class="col-md-12 ">学校选择
            <br>
            <br>
        </div>
        <div class="col-md-12 ">
            <ul  id="select_school_id" style="list-style: none;text-align: left;">
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=1&amp;page_type=1">东北农业大学</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=2&amp;page_type=1">哈尔滨工业大学</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=3&amp;page_type=1">东北林业大学</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=4&amp;page_type=1">牡丹江师范学院</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=5&amp;page_type=1">牡丹江医学院</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=6&amp;page_type=1">哈尔滨金融学院</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=7&amp;page_type=1">黑龙江大学</a></li>
                <li class="col-md-3"><a href="/index.php/public_fun/school_id?type=1&amp;school_id=8&amp;page_type=1">齐齐哈尔大学</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="mask">

</div>

<script src="../bootstrap/js/jquery-3.1.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
    !function ($) {
        $(document).on("click","ul.nav li.parent > a > span.icon", function(){
            $(this).find('em:first').toggleClass("glyphicon-minus");
        });
        $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
    }(window.jQuery);

    $(window).on('resize', function () {
        if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
    });
    $(window).on('resize', function () {
        if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
    })

</script>
<script>
    $('.school').click(function(){
        $('.mask').show();
        $('.cho-sch').css('display','block');
    });
    $('.mask').click(function(){
        $('.mask').hide();
        $('.cho-sch').css('display','none');
    });

    function showallprice(){
        var pre = document.getElementById("preview_con");
        var listInput=pre.getElementsByTagName("input");
        var allprice=0;
        for(let i =0;i<listInput.length;i++){
            let price=listInput[i].value;//获取一个input的份数
            price=parseFloat(price);
            allprice = allprice+price;
        }
        var str="<p style='color:red;font-weight: 900;margin-top:7px;margin-left:30px;'>共计："+allprice.toFixed(2)+"元</p>";
        $("#allprice").html(str);
    }

    function imgPreview(files){
        var length = files.length;
        if(length == 0){
            return false;
        }
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = files[0];
        var filename = file.name; //文件名称
        var filesize = Math.floor((file.size)/1024);

        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        //读取完成
        reader.onload = function(e) {
            var str="<div class='row' style='display: flex;align-items: center; /*定义body的元素垂直居中*/justify-content: center; /*定义body的里的元素水平居中*/' >" +//style='clear:both;'
                    "<div class='col-md-10' style='overflow-y:hidden;'>"+
                    "<img src="+e.target.result+"  />"+//style='max-width:600px;_width:expression(this.width > 600 ? '600px' : this.width);'
                    "</div>" +
                    "<div class='col-md-2'>"+
                    "<input class='input-lg' type='number' value='1'  style='vertical-align: middle;height:30px;width:70px;' onchange='showallprice()'>"+
                    "</div>" +
                    "</div>" +
                    "<hr/>";

            $("#preview_con").append(str);
            showallprice();
        };
        reader.readAsDataURL(file);
        return true;
    }

    $(function(){
        //阻止浏览器默认行。
        $(document).on({
            dragleave:function(e){    //拖离
                e.preventDefault();
            },
            drop:function(e){  //拖后放
                e.preventDefault();
            },
            dragenter:function(e){    //拖进
                e.preventDefault();
            },
            dragover:function(e){    //拖来拖去
                e.preventDefault();
            }
        });

        var box = document.getElementById('drop-area'); //拖拽区域
        box.addEventListener("drop",function(e){
            e.preventDefault(); //取消默认浏览器拖拽效果
            var fileList = e.dataTransfer.files; //获取文件对象
            if(imgPreview(fileList)){
                //上传
                xhr = new XMLHttpRequest();
                xhr.open("post", "upload.php", true);
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                var fd = new FormData();
                fd.append('mypic', fileList[0]);
                xhr.send(fd);
            }
        },false);

        $('#upload-doc').on("change",function(){
            var fileList = this.files;
            if(imgPreview(fileList)){
                //上传
                xhr = new XMLHttpRequest();
                xhr.open("post", "upload.php", true);
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

                var fd = new FormData();
                fd.append('mypic', fileList[0]);
                xhr.send(fd);
            }
            $(this).val('');
        });

    });

</script>
</body>

</html>
